Tạo hiệu ứng Rating đẹp bằng CSS cho website

Star rating giúp website của bạn nổi bật hơn trên kết quả tìm kiếm của Google. Bài viết này LaiXe.Xyz xin chia sẻ cách sử dụng HTML và CSS3 để tạo khung đánh giá Star Rating đẹp mắt cho website của bạn.

Tạo hình ảnh poster đẹp chỉ với CSS

Bài viết này, LaiXe.Xyz xin được phép chia sẻ cách tạo những tấm hình poster đẹp, có hiệu ứng nếp gấp bằng CSS. Hi vọng sẽ giúp các bạn sẽ làm nổi bật cho website của mình hơn nhé

Tạo hiệu ứng pháo hoa cho website bằng CSS3 Animation

Hôm nay chúng ta cùng tạo ra một hiệu ứng pháo hoa đơn giản cho website chỉ sử dụng CSS3 Animation. Cùng xem cách thực hiện như thế nào nhé

Tạo hiệu ứng rung lắc khi rê chuột vào hình ảnh bằng CSS3

Hiệu ứng cho hình ảnh bằng CSS3 có rất nhiều. Bài viết này sẽ hướng dẫn bạn tạo ra hiệu ứng rung lắc khi hover (rê chuột) vào tấm ảnh một cách đơn giản nhất, đó là chỉ cần sử dụng CSS3 với keyframes thôi nhé.

Hiệu ứng hover hình ảnh kèm theo Caption

Bài viết này LaiXe.Xyz muốn chia sẻ đến các bạn một hiệu ứng hover image rê chuột vào hình ảnh kèm theo caption hoặc mô tả sẽ xuất hiện.

Lại một hiệu ứng Hover Image đẹp dành cho các bạn

Lại một hiệu ứng Hover Image đẹp dành cho các bạn kết hợp cùng với Icon của ionicons. Hi vọng các bạn sẽ thích thú với chia sẻ này

Tạo biểu tượng Emoji vui nhộn của Facebook bằng CSS

Chắc hẳn ai chơi Facebook cũng không hề lạ lẫm gì với những biểu tượng cảm xúc vui, buồn, khóc lóc, tức giận này của Facebook. Cùng thử tạo những Emoji Emoticon này bằng Css xem thế nào nhé

Tạo một chiếc Ipad Pro bằng CSS3

Làm thế nào để tạo giao diện website trông giống như một chiếc Ipad Pro. Cùng LaiXe.Xyz thông qua bài viết này để làm thử một chiếc IPAD bằng CSS3 nhé

Chia sẻ Loading dạng tần số được tạo bằng CSS Animation

Thay vì dùng ảnh động Gif Loading chúng ta sẽ sử dụng CSS Animation để tạo ra những hiệu ứng Loading đẹp và góp phần tăng tốc cho website.

42 Mẫu Css Spinner, loader animation đẹp cho website của bạn

Bạn đang quan tâm làm thế nào để tạo ra được những hiệu ứng loading đẹp cho website. Hãy cùng tìm hiểu cách thức thực hiện để làm ra những Spinner, Loader đẹp như dưới đây nhé

Tạo kiểu chữ 3D bằng cách dùng Css3 Animation

CSS3 có sức mạnh không tưởng, khi có thể sử dụng nhiều thuộc tính để làm sinh động hơn cho website của bạn. Bài viết này LaiXe.Xyz xin chia sẻ cách Tạo kiểu chữ 3D bằng cách dùng Css3 Animation

Text Shadow - Đổ bóng cho chữ bằng Css3

Hiệu ứng đổ bóng cho đoạn chữ trong website được sử dụng bằng thuộc tính text-shadow trong css3. Bài viết này, Laixe.xyz xin phép được chia sẻ một vài mẫu Css đẹp, hi vọng sẽ giúp ích cho các bạn khi thiết kế website

Chia sẻ một số mẫu Css đẹp cho Checkbox

Thành phần Checkbox mặc định trong HTML có style khá đơn giản và không được đẹp mắt cho lắm. Chính vì thế ở bài viết này, mình xin chia sẻ một số mẫu CSS đẹp dành cho Checkbox mà chắc hẳn nhiều người cũng quan tâm

Hướng dẫn tạo CSS Button transitions có hiệu ứng rê chuột đẹp

LaiXe.Xyz xin phép được chia sẻ hướng dẫn tạo các button sử dụng Css transitions khi rê chuột đẹp mắt đến các bạn nhé. Cùng đọc và tham khảo cách thực hiện thông qua bài viết này

Hướng dẫn tạo button hover đẹp chỉ sử dụng css

Tạo nút button có style css đẹp là điều mà mọi nhà thiết kế website đều mong muốn. Bài viết này LaiXe.Xyz xin được phép chia sẻ hướng dẫn tạo button có  bong bóng và hiệu ứng đẹp khi bạn rê chuột vào

Hướng dẫn tạo button công tắc đẹp mắt bằng css

Bạn đang muốn tạo nút công tắc bật / tắt cho website. Chỉ bằng CSS và checkbox để bạn có thể thực hiện được điều này. LaiXe.Xyz xin chia sẻ cách thực hiện trong bài viết này nhé

Tạo nút button có hiệu ứng đẹp khi rê chuột vào

Hướng dẫn tạo nút button đẹp và hiệu ứng khi rê chuột vào. Cùng LaiXe.Xyz tìm hiểu cách thức thực hiện thông qua bài viết này nhé

Hiệu Ứng Hover Effect viết bằng CSS đẹp mắt

Bài viết này, LaiXe.Xyz chia sẻ đến các bạn để thực hiện một hiệu ứng Hover tuyệt đẹp. Và các bạn chỉ cần thực hiện điều này bằng CSS

15 Hiệu ứng hover hình ảnh sử dụng CSS

Bài viết này tiếp tục chia sẻ đến các bạn 15 hiệu ứng khi trỏ chuột (hover) vào hình ảnh chỉ sử dụng Css nhưng rất đẹp và sinh động cho website của bạn.

CSS dùng chung cho các ví dụ tại bài viết này 
Các ví dụ cho bài viết này đều được sử dụng chung Css dưới đây, nên đây cũng là đoạn CSS mà các bạn cần thêm vào nhé

figure {
 overflow: hidden;
}

Hiệu ứng Hover Zoom In #1

Code HTML như sau:

<div class="hover01">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover zoom in #1 này

/* Zoom In #1 */
.hover01 figure img {
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover01 figure:hover img {
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

Hiệu ứng Hover Zoom In #2

Code HTML như sau:

<div class="hover02">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover zoom in #2 này

/* Zoom In #2 */
.hover02 figure img {
 width: 300px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover02 figure:hover img {
 width: 350px;
}

Hiệu ứng Hover Zoom Out #1

Code HTML như sau:

<div class="hover03">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Zoom Out #1 */
.hover03 figure img {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover03 figure:hover img {
 -webkit-transform: scale(1);
 transform: scale(1);
}

Hiệu ứng Hover Zoom Out #2

Code HTML như sau:

<div class="hover04">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Zoom Out #2 */
.hover04 figure img {
 width: 400px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover04 figure:hover img {
 width: 300px;
}

Hiệu ứng Hover Slide

Code HTML như sau:

<div class="hover05">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Slide */
.hover05 figure img {
 margin-left: 30px;
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover05 figure:hover img {
 margin-left: 0;
}

Hiệu ứng Hover Rotate

Code HTML như sau:

<div class="hover06">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Rotate */
.hover06 figure img {
 -webkit-transform: rotate(15deg) scale(1.4);
 transform: rotate(15deg) scale(1.4);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover06 figure:hover img {
 -webkit-transform: rotate(0) scale(1);
 transform: rotate(0) scale(1);
}

Hiệu ứng Hover Blur

Code HTML như sau:

<div class="hover07">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Blur */
.hover07 figure img {
 -webkit-filter: blur(3px);
 filter: blur(3px);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover07 figure:hover img {
 -webkit-filter: blur(0);
 filter: blur(0);
}

Hiệu ứng Hover Gray Scale

Code HTML như sau:

<div class="hover08">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Gray Scale */
.hover08 figure img {
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover08 figure:hover img {
 -webkit-filter: grayscale(0);
 filter: grayscale(0);
}

Hiệu ứng Hover Sepia

Code HTML như sau:

<div class="hover09">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Sepia */
.hover09 figure img {
 -webkit-filter: sepia(100%);
 filter: sepia(100%);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover09 figure:hover img {
 -webkit-filter: sepia(0);
 filter: sepia(0);
}

Hiệu ứng Hover Blur + Gray Scale

Code HTML như sau:

<div class="hover10">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Blur + Gray Scale */
.hover10 figure img {
 -webkit-filter: grayscale(0) blur(0);
 filter: grayscale(0) blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover10 figure:hover img {
 -webkit-filter: grayscale(100%) blur(3px);
 filter: grayscale(100%) blur(3px);
}

Hiệu ứng Hover Opacity #1

Code HTML như sau:

<div class="hover11">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Opacity #1 */
.hover11 figure img {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover11 figure:hover img {
 opacity: .5;
}

Hiệu ứng Hover Opacity #1

Code HTML như sau:

<div class="hover12">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Opacity #2 */
.hover12 figure {
 background: #1abc9c;
}
.hover12 figure img {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover12 figure:hover img {
 opacity: .5;
}

Hiệu ứng Hover Flashing

Code HTML như sau:

<div class="hover13">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Flashing */
.hover13 figure:hover img {
 opacity: 1;
 -webkit-animation: flash 1.5s;
 animation: flash 1.5s;
}
@-webkit-keyframes flash {
 0% {
  opacity: .4;
 }
 100% {
  opacity: 1;
 }
}
@keyframes flash {
 0% {
  opacity: .4;
 }
 100% {
  opacity: 1;
 }
}

Hiệu ứng Hover Shine

Code HTML như sau:

<div class="hover14">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Shine */
.hover14 figure {
 position: relative;
}
.hover14 figure::before {
 position: absolute;
 top: 0;
 left: -75%;
 z-index: 2;
 display: block;
 content: '';
 width: 50%;
 height: 100%;
 background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 -webkit-transform: skewX(-25deg);
 transform: skewX(-25deg);
}
.hover14 figure:hover::before {
 -webkit-animation: shine .75s;
 animation: shine .75s;
}
@-webkit-keyframes shine {
 100% {
  left: 125%;
 }
}
@keyframes shine {
 100% {
  left: 125%;
 }
}

Hiệu ứng Hover Circle

Code HTML như sau:

<div class="hover15">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfn6A29P8DFZFVPhtv5tyAIouThSV-Wfk19qlXpydaNVFt-8puWwJnfWd7PwgQDcU-fhLDbFhiYz8Ol_GUIF1x4wbTOcFeZ9BTNMmbEuZQxSgbS3C49Qbrw4DfjQo5bnNtB-1BeQ_b0vD/s1600/anh-dep-gai-xinh.jpg" /></figure>
</div>

CSS cho hiệu ứng hover này

/* Circle */
.hover15 figure {
 position: relative;
}
.hover15 figure::before {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
 display: block;
 content: '';
 width: 0;
 height: 0;
 background: rgba(255,255,255,.2);
 border-radius: 100%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 opacity: 0;
}
.hover15 figure:hover::before {
 -webkit-animation: circle .75s;
 animation: circle .75s;
}
@-webkit-keyframes circle {
 0% {
  opacity: 1;
 }
 40% {
  opacity: 1;
 }
 100% {
  width: 200%;
  height: 200%;
  opacity: 0;
 }
}
@keyframes circle {
 0% {
  opacity: 1;
 }
 40% {
  opacity: 1;
 }
 100% {
  width: 200%;
  height: 200%;
  opacity: 0;
 }
}

Trên đây là những sưu tầm chia sẻ cách thực hiện những hiệu ứng Hover Image (rê chuột vào hình ảnh) rất đẹp và đơn giản chỉ cần sử dụng CSS.
Mong rằng bài viết sẽ giúp các bạn làm cho website trở nên đẹp và cuốn hút hơn nhé.

Chia sẻ CSS đẹp cho thẻ HR

Thẻ Hr là gì?

Trong ngôn ngữ HTML thì thẻ <hr> là một đường kẻ ngang. HR thực chất là viết tắt của cụm từ Horizontal Rules thông thường được sử dụng để phân tách các đoạn văn bản để cho đẹp mắt